<template>
	<div id="shangchuan">
		<el-dialog
	    title="新增彩票"
	    :visible.sync="addlottry"
	    width="40%"
	    :before-close="handleClose">
	    	<el-form :model="gameInfo" :rules="rules" ref="gameInfo">
	    		<table>
	    			<tr>
	    				<td>彩票英文名</td>
	    				<td>
	    					<el-form-item prop="en">
	    						<el-input v-model="gameInfo.en"></el-input>
	    					</el-form-item>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td>彩票中文名</td>
	    				<td>
	    					<el-form-item prop="cn">
	    						<el-input v-model="gameInfo.cn"></el-input>
	    					</el-form-item>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td>icons</td>
	    				<td>
	    					<ul style="display: flex; flex-direction: row;">
	    						<el-form-item prop="smIcon">
	    							<label for="smIcon" style="width: 40px; height: 40px; font-size: 12px; " ref="smIcon">
	    								<i class="el-icon-plus"></i>
	    							</label>
	    							<input type="file" id="smIcon" title="asdfa" @change="selectFile(40,40,$event)" name="icon">
	    						</el-form-item>
	    						<span style="font-size: 14px;">请上传40X40大小的图片</span>
	    					</ul>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td>icons</td>
	    				<td>
	    					<ul>
	    						<el-form-item prop="bigIcon">
	    							<label for="bigIcon" style="width: 90px; height: 90px; " ref="bigIcon">
	    								<i class="el-icon-plus"></i>
	    							</label>
	    							<input type="file" id="bigIcon" title="asdfa" @change="selectFile(90,90,$event)" name="icon">
	    						</el-form-item>
	    					</ul>
	    				</td>
	    			</tr>
	    		</table>
	    	</el-form>
	    	<span slot="footer" class="dialog-footer">
		        <el-button @click="handleClose()">取 消</el-button>
		        <el-button type="primary" @click="addnewgame">确 定</el-button>
    		</span>
	    </el-dialog>
	</div>
</template>
<script>
import axios from "axios"
	export default{
		props:["addlottry"],
		data(){
			return {
				uploadFiles: [],
	            gameInfo:{smIcon:'',bigIcon:''},
	            rules: {
	                en: [
	                    {required: true,message:'请输入彩票的英文名',trigger:'blur'},
	                    {min:2,message:'最少输入两个字符',trigger:'blur'}
	                ],
	                cn: [
	                    {required: true,message:'请输入彩票的英文名',trigger:'blur'},
	                    {min:2,message:'最少输入两个字符',trigger:'blur'}
	                ],
	                smIcon: [
	                    {required: true,message:'请选择图片',trigger:'change'},
	                ],
	                bigIcon: [
	                    {required: true,message:'请选择图片',trigger:'change'},
	                ]
	            }
			}
		},
		methods:{
			handleClose(){
            var smIcon = this.$refs.smIcon;
            var bigIcon = this.$refs.bigIcon;
            smIcon.innerHTML = '<i class="el-icon-plus"></i>';
            bigIcon.innerHTML ='<i class="el-icon-plus"></i>';
            this.$refs['gameInfo'].resetFields();
            this.uploadFiles = [];
            this.$parent.addlottry = false;
        },
		addnewgame(){
			this.$refs["gameInfo"].validate((valid)=>{
				
				if(valid){
					var fd=new FormData();
					for(var i=0;i<this.uploadFiles.length;i++){
						fd.append("file",this.uploadFiles[i]);
					}
					fd.append("en",this.gameInfo.en);
					fd.append("cn",this.gameInfo.cn);
					let config={
						headers:{"Content-Type":"multipart/form-data"}
					};
					axios.post(this.$api.addnewgame,fd,config)
					.then((resp)=>{
						console.log(resp);
						console.log(resp.message);
						this.$message({
							message:resp.data.message,
							type:resp.data.success?"success":"danger"
						});
						if(resp.data.success){
							this.$store.dispatch("loadallgames",{api:this.$api.allGames})
						}
						this.hadleClose();
					}).catch((error)=>{
						
					})
				}else{
					return false;
				}
			});
		},
		//打开图片选择和裁剪界面
        selectFile(width,height,event){
            console.log("宽是"+width);
            var e = event || window.event;
            let file = e.target.files[0];
            var url = this.getObjectURL(file);
            var image = new Image();
            image.src = url;
            image.onload = ()=>{
                if(image.width!=width||image.height!=height){
                    alert(`请上传尺寸为宽${width},高${height}的图片`);
                }else{
                    if(width==40){
                        this.uploadFiles.push(file);
                        var smIcon = this.$refs.smIcon;
                        smIcon.innerHTML=image.outerHTML;
                        this.gameInfo.smIcon = true;
                    }
                    if(width==90){
                        console.log("宽度是"+width);
                        this.uploadFiles.push(file);
                        var bigIcon = this.$refs.bigIcon;
                        console.log(this.$refs);
                        bigIcon.innerHTML=image.outerHTML;
                        this.gameInfo.bigIcon = true;
                    }
                }
            }
            //文件预览
            console.log(file);
        },
        //取得该文件的url 
        getObjectURL(file) { 
        　　var url = null ; 
        　　if (window.createObjectURL!=undefined) { 
        　　　　url = window.createObjectURL(file) ; 
        　　} else if (window.URL!=undefined) { 
        　　　　url = window.URL.createObjectURL(file) ; 
        　　} else if (window.webkitURL!=undefined) { 
        　　　　url = window.webkitURL.createObjectURL(file) ; 
        　　} 
        　　return url ; 
        }
	}
}		
</script>

<style lang="scss" scoped>
label {
      padding: 0 5px;
      font-size: 30px;
      border-radius: 5px;
      color: #333;
      border: 1px dashed #ccc;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    #smIcon,#bigIcon {
      display: none;
      margin-top: 100px;
    }
</style>